<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(val) {
            var a = document.getElementById(val);
            a.style.background = 'red';
            a.style.fontSize = "20px";
        }
        function f1(val) {
            var a = document.getElementById(val);
            a.style.background = 'dimgray';
            a.style.fontSize = "15px";
        }
    </script>
</head>
<body>
    <ul style="width: 80px;">
        <div style="background-color: dimgray">
            <li id="ml" onmouseover="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">曼联</li>
            <li id="zg" onmouseover="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">中国</li>
            <li id="mg" onmouseover="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">美国</li>
            <li id="agt" onmouseover="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">阿根廷</li>
            <li id="xby" onmouseover="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">西班牙</li>
        </div>
    </ul>
</body>
</html>